<template>
  <div class="userList back-white">
    <div>
      <page-title>相册列表</page-title> 
    </div>
    <div class="search-box">
      <el-input class="search-input" v-model="keywordSearch" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="subSeach">搜索</el-button> 
      <div class="list-state">
        状态：
        <el-select @change="selectChange" v-model="optionsValue" placeholder="请选择" >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="float-right">
         总计{{user_num}}条数据，<span style="color:red;font-weight:bold;line-height:40px;">{{not_audit_num}}</span>条待处理
      </div> 
    </div> 

    <div class="content clear-both ">

      <div class="photo-group float-left" v-for="(item,index) in photowallData" @click="ditailPhoto(item)" :key="index">
        <div class="img-box">
          <img v-lazy="item.head_pic">
          <div class="state text-center" v-if="item.audit_status==1">已审核</div>
        </div> 
        <div class="info">
          <div style="font-size:16px;margin:5px 0;font-weight:bold;">{{item.nickname}}</div>
          <div>UID:{{item.uuid}}</div>
        </div>
      </div>
      <div class="text-center" v-if="photowallData.length==0">暂无数据</div>

    </div>
    <div class="pagination text-center"> 
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageChange" 
          :page-sizes="[40, 60 , 80 ]"
          :page-size="40"
          layout="sizes, prev, pager, next"
          :total="pageCount">
        </el-pagination>
    </div>
    <!--审核详情-->
    <el-dialog title="修改用户信息" @close="closeDialog" center :visible.sync="dialogFormVisible" width="700px"> 
        <div class="dialog-content clear-both">
          <div class="user-info">
            <div>{{userName}}</div>
            <div>UID：{{userUid}}</div>
          </div>
          <div>
            <div class="photo-group float-left" v-for="(item,index) in userPhotoLink" :key="index">
              <div class="img-box">
                <img v-lazy="item.link"> 
              </div>  
              <div class="creat_at text-center">{{item.create_at}}</div>
              <div class="dialog-btn-box text-center">
                <el-button type="danger" class="btn-size btn-left" @click="setUserPhoto('delete',item)">删除</el-button>
                <el-button type="primary" class="btn-size" @click="setUserPhoto('set',item)" v-if="item.serial_num!=1">设为封面</el-button>
              </div>
            </div>
          </div> 
        </div>
        <div slot="footer" class="dialog-footer"> 
            <el-checkbox class="check-box" label="推荐" v-model="userIsRecommend"></el-checkbox>
            <el-button type="primary" @click="editList">提交</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
        keywordSearch:'', 
        stateOptions: [{
          value: '2',
          label: '全部'
        },{
          value: '0',
          label: '待审核'
        },{
          value: '1',
          label: '已审核'
        }],
        optionsValue: '2',

        photowallData: [], //用户列表
        pageCount: 0, //总数
        curPage:1, //当前页数
        pageSize:40, //一页显示多少条
        not_audit_num:0, //待审核条数
        user_num:0,
        dialogFormVisible:false,
        userName:'',
        userUid:'',
        userPhotoLink:[],
        userIsRecommend: null,

        dialogItem:{},
      }
    },
    created(){
      this.getPhotowallListData();
    },
    methods:{
      subSeach(){ 
        if(this.keywordSearch){
          this.curPage=1;
          this.getPhotowallListData();
        }else{
          this.$message({
            showClose: true,
            message: '请输入关键字',
            type: 'warning'
          });
        }   
      },
      getPhotowallListData(){ //获取用户列表数据
         let vm = this;
         let body={
           page:vm.curPage, //当前页数
           size:vm.pageSize,  //一页显示多少条
           keyword:vm.keywordSearch,
           audit_status:vm.optionsValue
         }
         vm.photowallData=[];
         api.photowallList(body).then(res=>{ 
            if(res.data.code==300000){
              res.data.data.data?vm.photowallData=res.data.data.data:vm.photowallData=[];  
              vm.pageCount=res.data.data.info.total;
              vm.not_audit_num=res.data.data.not_audit_num;
              vm.user_num=res.data.data.user_num;
            }
         })
      },
      // 当前页数
      pageChange(e){
        this.curPage = e;
        this.getPhotowallListData();
      },
      pageSizeChange(e){
        this.pageSize=e;
        this.getPhotowallListData();
      },
      toggleAccount(status,uuid){ //启用/禁用账号
        let vm = this;
        let body = {
           uuid:uuid,
           status:parseInt(status)
        };
        api.editForbidden(body).then((res) => {
          if(res.data.code == 300000){
            vm.getPhotowallListData();
          } 
        })
      },
      ditailPhoto(item){ //跳转到编辑
        let vm = this;
        vm.userPhotoLink=[];
        api.getPhotoInfo({uuid:item.uuid}).then(res=>{
          if(res.data.code==300000){
            vm.userName=item.nickname;
            vm.userUid=item.uuid;
            vm.userIsRecommend = item.recommend==1?true:false,  
            vm.dialogItem=item; 
            if(res.data.data){
              vm.userPhotoLink=res.data.data;
              vm.dialogFormVisible=true;
            }else{
              this.$message({
                showClose: true,
                message: '该用户无照片',
                type: 'warning'
              });
            }
          }
        }); 
      },
      
      setUserPhoto(val,item){
        let vm = this;
        let body={
          uuid:vm.userUid,
          link:item.link,
          serial_num:item.serial_num
        };
        if(val=='delete'){
          api.deletePhotowall(body).then(res=>{
            if(res.data.code==300000){
              vm.ditailPhoto({uuid:vm.userUid});
            }
          })
        }else if(val=='set'){
          api.setcoverPhotowall(body).then(res=>{
            if(res.data.code==300000){
              vm.ditailPhoto({uuid:vm.userUid});
            }
          })
        }
      }, 
      editList(){ //提交 
        let vm = this;  
        let data = {
          uuid: vm.userUid,
          recommend: vm.userIsRecommend?1:0
        }
        api.isRecommendUser(data).then(res=>{
          if(res.data.code===300000) {
            vm.getPhotowallListData()
          }
        })
        vm.dialogFormVisible = false; 
      }, 
      selectChange(e){ 
        this.optionsValue=e;
        this.getPhotowallListData();
      },

      //关闭dialog
      closeDialog(){
          this.dialogItem.audit_status=1;
      },
    }
  }
</script>
<style lang="scss" scoped>
    .search-box{
      padding:20px;
      .search-input{
        width:200px !important;
      }
      .list-state{
        display:inline-block;
        margin-left:20px;
      }
    }
    .content{
      width:100%;
      height:100%;
      padding:20px;
      .photo-group{ 
        height:250px;
        margin-left:25px;
        margin-bottom:25px; 
        border-radius:6px;
        cursor:pointer;
        .img-box{
          width:170px;
          height:200px;
          position:relative;
          .state{
            position:absolute; 
            border-radius:6px;
            top:0;
            left:0;
            width:100%;
            height:100%;
            // top:50%;
            // left:50%;
            // margin-top:-20px;
            // margin-left:-35px;
            // width:70px;
            // height:36px;
            line-height:200px;
            font-size:22px;
            font-weight:bold;
            color:#67C23A;
            background:rgba(64,158,255,.3);
          }
          img{
            width:100%;
            height:100%;
            border-radius:6px;
          }
        } 
        .info{ 
          width:170px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .dialog-content{
      .user-info{
        padding-left:20px; 
        margin-bottom:10px;
        div{
          font-size:18px;
          font-weight:bold;
          color:#000;
        }
      }
      .photo-group{ 
        margin-left:50px;
        margin-bottom:25px; 
        border-radius:6px; 
        .img-box{
          width:150px;
          height:170px; 
          img{
            width:100%;
            height:100%;
            border-radius:6px;
          }
        } 
        .creat_at{
          padding:10px 0;
        }
        .dialog-btn-box{
          margin-top:6px;
          .btn-size{
            padding: 6px 10px !important;
          }
          .btn-left{
            margin-left:0 !important;
          }
        }
      }
    }
    .pagination{
      display:block;
      width:100%;
      padding-bottom:60px;
    }
</style>